<!--安居分品新增-->
<template>
	<view class="box_ajf temp_wrap">
		<!--申请人部分-->
		<view class="item_wrap clearfix">
			<view class="title_bar">客户信息</view>
			<view class="img_wrap" v-if="isNew">
				<image @click="uploadCardFront" src="/static/public/sfz.png" class="formImg" v-if="!url1"></image>
				<image :src="url1" class="formImg" v-else></image>
				<icon class='formImg_item_icon' v-if="url1" :data-id="1" type="clear" size="20" color="red" @click="clearFormImg" />
			</view>
			<view class="item_input">
				<text class="title">申请人姓名:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.basicBorrowerName" :disabled="isOurSelf"
					placeholder="请输入姓名"></m-input>
			</view>
			<view class="item_input">
				<text class="title">身份证号码:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.basicBorrowerCard" :disabled="isOurSelf"
					placeholder="身份证号码"></m-input>
			</view>
			<view class="item_input">
				<text class="title">联系电话:<text class="red">*</text></text>
				<m-input class="right" type="number" v-model="data.basicBorrowerPhone" :disabled="isOurSelf"
					placeholder="联系电话" :maxLength="11"></m-input>
			</view>
			<view class="item_input">
				<text class="title">现住地址:</text>
				<m-input class="right" type="text" v-model="data.pledgeHouseAddress" :disabled="isOurSelf"
					placeholder="请输入地址"></m-input>
<!-- 				<view class="right address">
					<pick-regions @getRegion="handleGetRegion" :defaultRegion="defaultRegionCode" class="addressPick" :disabled="isOurSelf">
						<text class="fontSize" v-if="data.pledgeHouseAddress">{{data.pledgeHouseAddress}}</text>
						<text class="fontSize pleaholder" v-else>点击选择省市区</text>
					</pick-regions>
				</view> -->
			</view>
			<view class="item_input">
				<text class="title">工作单位:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerWork" :disabled="isOurSelf"
					placeholder="工作单位"   ></m-input>
			</view>
			<view class="item_input">
				<text class="title">婚姻状况:</text>
				<view class="right address">
					<picker @change="bindPickerChange" :range="columns" :disabled="isOurSelf"> 
						<view>
							<input type="text" placeholder="请选择婚姻状况" v-model="data.basicBorrowerMarriage" disabled/>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<!--star配偶信息-->
		<view class="item_wrap clearfix" v-if="data.basicBorrowerMarriage === '已婚'">
			<view class="title_bar">配偶信息</view>
			<view class="img_wrap" v-if="isNew">
				<image @click="uploadCardFrontMate" src="/static/public/sfz.png" class="formImg" v-if="!url2"></image>
				<image :src="url2" class="formImg" v-else></image>
				<icon class='formImg_item_icon' v-if="url2" :data-id="2" type="clear" size="20" color="red"  @click="clearFormImg" />
			</view>
			<view class="item_input">
				<text class="title">配偶姓名:<text class="red">*</text></text> 
				<m-input class="right" type="text" v-model="data.basicBorrowerMateName" :disabled="isOurSelf"
					placeholder="请输入姓名" :maxLength="11"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">身份证号码:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.basicBorrowerMateCard" :disabled="isOurSelf"
					placeholder="请输入身份证"  :maxLength="18"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">联系电话:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.basicBorrowerMatePhone" :disabled="isOurSelf"
					placeholder="联系电话" :maxLength="11"  ></m-input>
			</view>
			<view class="item_input">
				<text class="title">现住地址:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerMateAddress" :disabled="isOurSelf"
					placeholder="请输入地址"></m-input>
				<!-- <view class="right address">
					<pick-regions @getRegion="handleGetRegionMate" :defaultRegion="defaultRegionCode" class="addressPick" :disabled="isOurSelf">
						<text class="fontSize" v-if="data.basicBorrowerMateAddress">{{data.basicBorrowerMateAddress}}</text>
						<text class="fontSize pleaholder" v-else>点击选择地址</text>
					</pick-regions>
				</view> -->
			</view>
			<view class="item_input">
				<text class="title">工作单位:</text>
				<m-input class="right" type="text" v-model="data.basicBorrowerMateWork" :disabled="isOurSelf"
					placeholder="工作单位"  ></m-input>
			</view>
		</view>
		<!--end配偶信息-->
		<!--start贷款信息-->
		<view class="item_wrap clearfix">
			<view class="title_bar">贷款信息</view>
			<view class="item_input">
				<text class="title">申请金额:<text class="red">*</text></text>
				<input class="right" type="number" v-model="data.basicLoansMoney" :disabled="isOurSelf"
					placeholder="请输入申请金额"  ></input>
				<text class="dw">（万元）</text>
			</view>
			<view class="item_input">
				<text class="title">贷款期限:</text>
				<input class="right" type="number" v-model="data.basicLoansMonths" :disabled="isOurSelf"
					placeholder="请输入贷款月数"  ></input>
				<text class="dw">（个月）</text>
			</view>
			<view class="item_input">
				<text class="title">还款方式:</text>
				<view class="right address">
					<picker @change="bindRefundChange" :range="refund" :disabled="isOurSelf"> 
						<view>
							<input type="text" placeholder="请选择还款方式" v-model="data.approveRepaymentMode" disabled/>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<!--end贷款信息-->
		<!--star佣金预估计-->
		<view class="item_wrap clearfix">
			<view class="title_bar" style="color:#368FFA">佣金预估</view>
			<view class="item_input">
				<text class="title">服务费点数:</text>
				<input class="right" type="number" v-model="data.intentionRatio"
					:placeholder="RatioPlace"   :disabled="!formShow && isOurSelf " @blur="changeRatio"></input>
				<text class="dw">%</text>
			</view>
			<view class="item_input">
				<text class="title">附加费用:</text>
				<input class="right" type="number" v-model="data.intentionAddMoney" :disabled="isOurSelf || isNew"
					placeholder="附加费用" @blur="changeRatio2" ></input>
			</view>
			<view class="item_input">
				<text class="title">意向服务费:</text>
				<input class="right" type="number" v-model="data.intentionServerMoney" :disabled="isOurSelf || isNew"
					placeholder="意向服务费"  ></input>
			</view>
			<view class="wrap_yj" v-if="isNew">
				<view class="yjTitle" v-if="!formShow && form1.brokerType != 3">我的佣金预估：填写申请金额及服务点数后查看;</view>
				<view class="yjTitle" v-if="!formShow && form1.brokerType == 3">我的佣金预估：填写申请金额后查看;</view>
				<!-- 1 -->
				<view class="yjTitle" v-if="form1.brokerType == 1 && formShow">我的佣金预估：
					{{data.basicLoansMoney * 10000}} * {{form1.brokerRatio}}% = {{money}}</view>
				<!-- 2 -->
				<view class="yjTitle" v-if="form1.brokerType == 2 && formShow">我的佣金预估：
					{{data.basicLoansMoney * 10000}} *（{{data.intentionRatio || 1}}% - {{form1.brokerRatio}}%）= {{money}} </view>
				<!-- 3 -->
				<view class="yjTitle" v-if="form1.brokerType == 3 && form1.basicLoansMoney">我的佣金预估：固定金额为{{form1.basicLoansMoney * 10000}};</view>
				
				<view class="yjTitle" v-if="form1.brokerType == 3 && form1.basicLoansMoney">我的佣金预估：固定金额为{{form1.basicLoansMoney * 10000}};</view>
				<view class="yjTitle" v-if="!data.basicLoansMoney">我的奖金预估：输入申请金额后查看;</view>
				<view class="yjTitle" v-if="data.basicLoansMoney">我的奖金预估：{{data.basicLoansMoney * 10000}} * 1% * 80% = {{basicLoansMoneyYg}}</view>
				<view class="yjText">
					<text style="color:red">*</text><text>只有加入合伙人团队或成为合伙人才可以获得额外奖金，按梯度0.5%~1%合伙人及成员分配。</text>
				</view>
				<view class="yjTitle" style="color:#368FFA;text-align: center;">查看我的合伙人奖金</view>
			</view>
		</view>
		<!--end佣金预估计-->
		<view class="btn_wrap" v-if="isNew">
			<button class="btn" @click="btnSubmit">确 认</button>
		</view>
		
	</view>
</template>

<script>
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import {uploadCard, formatDecimal} from '@/common/util.js'
	export default {
		components: {
			mInput,
			pickRegions 
		},
		props:["form1","formData","isNew", "isOurSelf"],
		computed:{
			basicLoansMoneyYg: function() {
				let data = this.data.basicLoansMoney * 10000 * 0.1 * 0.08;
				return formatDecimal(data, 2)
			},
			formShow: function() {
				return this.data.basicLoansMoney ? true: false
			},
			RatioPlace: function() {
				return `${this.form1.brokerMin}% - ${this.form1.brokerMax}%,填写数字,先填写申请金额`
			}
		},
		data(){
			return{
				//佣金
				money: null,
				url1: null,
				url2: null,
				//申请人地址
				region: [],
				//配偶人地址
				regionMate: [],
				columns: ["未婚", "已婚"],
				refund: ["等额本息", "先息后本", "等额本金", "等额等息"],
				data:{
					//申请人信息
					basicBorrowerName: null,
					basicBorrowerCard: null,
					basicBorrowerPhone: null,
					pledgeHouseAddress: null,
					basicBorrowerWork: null,
					basicBorrowerMarriage: null,
					//配偶信息
					basicBorrowerMateName: null,
					basicBorrowerMateCard: null,
					basicBorrowerMatePhone: null,
					basicBorrowerMateAddress: null,
					basicBorrowerMateWork: null,
					//贷款信息
					basicLoansMoney: null,
					basicLoansMonths: null,
					approveRepaymentMode: null,
					//佣金预估
					intentionRatio: null,
					intentionAddMoney: null,
					intentionServerMoney: null
				},
				defaultRegionCode:"500103"
			}
		},
		created() {
			this.data.intentionAddMoney = this.form1.intentionAddMoney;
			if(this.formData){
				this.data = JSON.parse(JSON.stringify(this.formData));
			}
		},
		methods:{
			//上传申请人按钮
			uploadCardFront() {
				let id = 1;
				uploadCard("/applet/order/scanIdCard", id).then(res => {
					this.url1 = res.filePath;
					this.data.basicBorrowerName = res.data.name;
					this.data.basicBorrowerCard = res.data.num;
				});
			},
			//上传配偶身份证
			uploadCardFrontMate() {
				let id = 2;
				uploadCard("/applet/order/scanIdCard", id).then(res => {
					this.url2 = res.filePath;
					this.data.basicBorrowerMateName = res.data.name;
					this.data.basicBorrowerMateCard = res.data.num;
				});
			},
			// 获取选择的地区
			handleGetRegion(region){
				this.region = region;
				this.data.pledgeHouseAddress = region.map(item=>item.name).join(' ');
			},
			handleGetRegionMate(region) {
				this.regionMate = region;
				this.data.basicBorrowerMateAddress = region.map(item=>item.name).join(' ');
			},
			//婚姻选择状况
			bindPickerChange (e) {
				let index = e.detail.value;
				this.data.basicBorrowerMarriage = this.columns[index];
			},
			//还款方式
			bindRefundChange(e) {
				let index = e.detail.value;
				this.data.approveRepaymentMode = this.refund[index];
			},
			//清除扫描图片
			clearFormImg(e) {
				let imgId = e.target.dataset.id ||e.currentTarget.dataset.id;
				if(imgId == 1) this.url1 = null;
				if(imgId == 2) this.url2 = null;
			},
			//佣金预估
			changeRatio(e) {
				let value = e.detail.value;
				if(!value) return;
				if(value<this.form1.brokerMin){
					uni.showToast({
					    title: '请输入正确值',
					    icon: "none"
					});
					this.data.intentionRatio = '';
					return false
				}
				if(value>this.form1.brokerMax){
					uni.showToast({
					    title: '请输入正确值',
						icon: "none"
					});
					this.data.intentionRatio = '';
					return false
				}
				let data = this.data.basicLoansMoney * 10000 * (this.data.intentionRatio/100 - this.form1.brokerRatio/100);
				let number = Number(this.data.basicLoansMoney * 10000 * this.data.intentionRatio/100) + parseInt(this.data.intentionAddMoney || 0);
				this.data.intentionServerMoney = formatDecimal(number, 2);
				this.money = formatDecimal(data, 2);
			},
			changeRatio2(e) {
				let value = e.detail.value;
				let data = this.data.basicLoansMoney * 10000 * (this.data.intentionRatio/100 - this.form1.brokerRatio/100);
				let number = Number(this.data.basicLoansMoney * 10000 * this.data.intentionRatio/100) + parseInt(this.data.intentionAddMoney);
				this.data.intentionServerMoney = formatDecimal(number, 2);
				this.money = formatDecimal(data, 2);
			},
			//确认
			btnSubmit() {
				//判断是否结婚
				let isMarry = this.data.basicBorrowerMarriage;
				if(isMarry === "已婚"){
					let checkRes = graceChecker.check(this.data, formRuleConfig.ajfMate);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
				}
				this.data.basicBorrowerMarriage = isMarry ||"未婚";
				let checkRes = graceChecker.check(this.data, formRuleConfig.ajfRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				let formData = JSON.parse(JSON.stringify(this.data));
				//调用父组件的提交函数
				this.$emit("postOrderInfo", formData);
			}
		}
	}
</script>

<style scoped lang="scss">
	.item_wrap{
		margin-top: 20rpx;
		width: 100%;
		padding: 0 40rpx 60rpx 40rpx;
		background: #FFFFFF;
		.title_bar {
			font-size: 32rpx;
			font-weight: bolder;
			line-height: 42rpx;
			margin-top: 20rpx;
		}
	}
	.img_wrap{
		width: 100%;
		position: relative;
	}
	.formImg{
		width: 100%;
		height: 400rpx;
		position: relative;
	}
	.formImg_item_icon {
	    position: absolute;
	    right: 0;
		top: 0;
	}
	.item_input{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #dcdcdc;
		height: 82rpx;
		.title{
			font-size: 28rpx;
		}
		.right{
			flex: 1;
			text-align: right;
			font-size: 14px;
		}
		.address{
			padding: 20rpx 10rpx;
		}
		.addressPick{
			height: 38rpx;
			line-height: 38rpx;
			overflow: hidden;
		}
		.dw{
			font-size: 28rpx;
		}
	}
	.btn_wrap{
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx 30rpx;
		.btn{
			background: #52AAF8;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}

	.wrap_yj{
		background-color: rgb(243, 248, 255);
		padding: 30rpx;
		margin-top: 30rpx;
	}
	.yjTitle {
		font-size: 14px;
		color: #333333;
	}
	
	.yjText {
		font-size: 12px;
		color: #999999;
		margin: 10rpx 0;
	}
	
	
</style>
